<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <title>首页</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .wrapper{
            margin: 0 auto;
            width: 1000px;
        }
        a{
            text-decoration: none;
        }
        .content{
            width: 600px;
        }
        .content .article {
            width: 600px;
            padding: 20px;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            margin-bottom: 10px;
        }



    </style>
</head>
<body>
<div th:insert="~{common2 :: navbar}"></div>
<div class="content wrapper" th:each="article:${articles}">
    <div class="article">
        <a th:text="${article.content}" th:href="@{'/article/content/' + ${article.id}}"></a>
    </div>

</div>
</body>
</html>